<template>
	<div class="wrapper">
		<textarea @input="changeTxt" :placeholder="placeholder" :maxlength="maxLength" autofocus="true" v-model="val"></textarea>
		<span class="tips">
			<span :class="{'remnant':remnant.length!=0,'zero':remnant.length==0}">{{remnant}}</span>/{{maxLength}}
		</span>
	</div>
</template>

<script>
	export default {
		name: 'wiocTextarea',
		data() {
			return {
				val: "",
			};
		},
		props: {
			maxLength: {
			type: Number,
			default: 200
			},
			placeholder: {
				type: String,
				default: '请填写事件描述'
			},
			value:{
				type: String
			}

		},
		created(){
			if(this.value){
				this.val = this.value
			}
		},
		watch:{
		    "value":{
		        handler(val) {
                    this.val=val;
                }
            },
            deep: true
        },
		computed: {
			remnant() {
				return this.val.length;
			}
		},
		methods:{
			changeTxt(){
				this.$emit("input",this.val)
			}
		}
	};
</script>

<style scoped>
	.wrapper {
		position: relative;
		padding: 30px;
		min-height: 1rem;
	}

	textarea {
		border:0;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.tips {
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: .15rem;
		color:#727272;
	}

	.remnant {
		color: #f66464;
	}

	.zero {
		color:#f66464;
	}
</style>
